import Vue from 'vue'
import Vuex from 'vuex'
import student from './student'
Vue.use(Vuex)

export default new Vuex.Store({
  //存放组件需要共享数据
  state: {
    numA: 100,
    persons: [{
        name: 'zhangsan',
        age: 20
      },
      {
        name: 'lisi',
        age: 21
      },
    ]
  },
  //类似于组件中的计算属性
  getters: {
    fmtNumA(state) {
      return "*****" + state.numA + "元";
    },
    total(state) {
      return 0;
    }
  },
  //方法 ，类似于事件
  //用于修改state中的数据  (规范 约定：只放同步代码) 
  mutations: {
    addPerson(state, payload) {
      //预期： payload ：{name:'wang',age:25}
      console.log("mutations", payload);
      state.persons.push(payload);
      //发请求  ！！！！！ 这里不要写异步代码！！！
      //别写！！！！
      // setTimeout(() => {
      //   state.persons.push(payload);
      // }, 3000)
    }
  },
  //方法，类似于事件，与mutations类似
  //区别： 可以包含异步操作。 它提交到mutations，不直接修改数据。
  actions: {
    //context:{state:{},commit:fn}
    // let {commit} = {state:{},commit:fn}  对象解构
    // let {a,b} = {a:100,b:200,c:300}
    asyncAddPerson({
      commit
    }, payload) {
      console.log("actions", payload);
      //异步方式添加用户  setTimeout模拟  ==  axios请求 
      setTimeout(() => {
        //提交（调用）mutations进行添加
        commit('addPerson', payload)
      }, 3000)
    }
  },
  //2.定义模块
  modules: {
    student
  }
})

/*
   项目过大一般会使用模块化方式
  1. 创建student文件夹 ，index.js
     模块内的index依然可以定义state，getters，actions..
     注意： namespaced: true,
  2. store->index.js
     引入student模块  import student from './student'
     设置  modules
     modules: { student  }
  3. 在组件中获取
     state
     ...mapState({
         变量：state=>state.模块名.属性
     })
     getters，mutations，actions
     ...mapGetters({
         变量:'模块名/变量'
     })
     ...mapMutations({
         变量:'模块名/变量'
     })
     ...mapActions({
         变量:'模块名/变量'
     })
 */